import React from "react"
import './index.scss'
export default class ToggleNavGroup extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        defaultValue:this.props.defaultValue||0,
                        btnGroup:this.props.btnGroup||[
                                {
                                        label:'供应',
                                        value:0,
                                        count:''
                                },
                                {
                                        label:'求购',
                                        value:1,
                                        count:''
                                }
                        ]
                }
        }
        handleItemOnClick = defaultValue=>{
                const {onClick} = this.props
                this.setState({defaultValue},()=>{
                        onClick(defaultValue)
                })
        }
        render () {
                const {btnGroup,defaultValue} = this.state
                return <div className='toggle-nav-group'>
                        {
                                btnGroup.map((item,index)=><div
                                        onClick={this.handleItemOnClick.bind(this,item.value)}
                                        className={`toggle-nav-item ${defaultValue===item.value&&'active'}`}
                                        key={index}>
                                        {item.label}{item.count}
                                </div>)
                        }
                        <div className='line' style={{left:`${defaultValue*50}%`}}/>
                </div>
        }
}
